layui.use(['form', 'layedit', 'laydate', 'table', 'laytpl', 'jquery'], function () {
    var form = layui.form
        , layer = layui.layer
        , layedit = layui.layedit
        , table = layui.table
        , laydate = layui.laydate
        , laytpl = layui.laytpl
        , $ = layui.jquery
        , laydate = layui.laydate;
    // var addIndex; // 新增窗口索引
    var addMenuHtml;
    //日期时间范围
    laydate.render({
        elem: '#queryTime'
        , type: 'datetime'
        , range: true
        , max: 'nowTime'
        , min: '2018-07-01'
    });
    //渲染表单
    form.render();
    //定义sessionID
    var sessionId = window["sessionStorage"].getItem("SESSION_ID");
    //自定义验证规则
    form.verify({
        //菜单排序字段验证
        menuSort: [/^[a-zA-Z0-9]+$/, '菜单排序字段不能出现中文字符！']
    });
    //查询列表渲染
    var dataMenu = table.render({
        elem: '#test'
        , url: '/menu/menuList'
        , toolbar: '#toolbarDemo'
        , title: '菜单列表'
        , totalRow: false
        , contentType: 'application/json'
        , method: 'post'
        , where: {sessionId: sessionId}
        /*, initSort: {
            field: 'MENU_ID' //排序字段，对应 cols 设定的各字段名
            // ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
        }*/
        , sort: true
        , cols: [[
            {type: 'checkbox', fixed: 'left'}
            , {field: 'menuId', title: '菜单ID', width: 90, sort: true}
            , {field: 'menuName', title: '菜单名称', width: 150}
            // , {field: 'CATEGORY_ID', title: '父级菜单名称', width: 150, templet: '#categoryId'}
            , {field: 'menuAction', title: '菜单Action', width: 160}
            , {field: 'menuSort', title: '菜单排序', width: 120, sort: true}
            , {field: 'clickCount', title: '点击量', width: 120}
            , {field: 'lastClickTime', title: '最后被点击时间', width: 180}
            , {field: 'lastClickUser', title: '最后点击用户', width: 180}
            , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
        ]]
        , page: true
        , limit: 10
        , limits: [10, 30, 50, 100]
        , request: {
            pageName: 'pageNumber',
            limitName: 'limit'
        }
        , parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": res.returnCode, //解析接口状态
                "msg": res.returnMsg, //解析提示文本
                "count": res.count, //解析数据长度
                "data": res.bean //解析数据列表
            };
        }
    });

    //查询节点按钮事件
    layui.form.on('submit(btnQuery)', function (data) {
        console.log(data);
        console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
        console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
        var searchInfo = data.field;
        dataMenu.reload({  // 触发列表重新请求数据//查询
            where: searchInfo,
            page: {
                curr: 1
            }
        });
        return false;
    });
    //监听锁定操作
    form.on('checkbox(lockDemo)', function (obj) {
        layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
    });
    var detail;
    //监听行工具事件
    table.on('tool(test)', function (obj) {
        var data = obj.data;
        if (obj.event === 'edit') {
            var menuDetailsReq = {};
            menuDetailsReq.menuId = data.menuId;
            var menuInfo = {  // userEdit对应表单 lay-filter的值
            };
            var reqParam = {
                url: "/menu/queryMenuDetail",
                param: menuDetailsReq,
                callback: function (req) {
                    console.log(detail);
                    menuInfo = req.bean;
                    layer.open({
                        type: 1,
                        title: '修改菜单',
                        content: $('#editMenuConfig').html(),
                        area: '800px',
                        success: function () {
                            console.log(detail);
                            // layer.close(loadingId);
                            initEditMenu(detail || {});
                            layui.form.val("menuEdit", menuInfo); // 给表单赋值
                        }
                    });
                    form.render();
                },
                forceSession: true
            };
            ReqUtil.sendPostReq(reqParam);
        }
    });

    //编辑页面数据传递
    function initEditMenu(list) {
        console.log(list);
        var temp = editMenuConfig.innerHTML;
        list.menuId = list.menuId === undefined ? "" : list.menuId;
        list.menuName = list.menuName === undefined ? "" : list.menuName;
        list.menuSort = list.menuSort === undefined ? "" : list.menuSort;
        list.menuAction = list.menuAction === undefined ? "" : list.menuAction;
        laytpl(temp).render(list, function (html) {
            editList.innerHTML = html;
        });
    }

    //编辑节点按钮事件
    layui.form.on('submit(btnEditMenu)', function (data) {
        console.log(data);
        console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
        console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field.toString()); //当前容器的全部表单字段，名值对形式：{name: value}
        var updateMenuReq = data.field;
        var loadDialogIndex = layer.load(2);
        console.log(updateMenuReq);
        var reqParam = {
            url: "/menu/updateMenu",
            param: updateMenuReq,
            callback: function (resp) {
                layer.close(loadDialogIndex);
                layer.closeAll();
                layer.msg('恭喜您,修改成功!');
                dataMenu.reload({  // 触发列表重新请求数据//查询
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    //, where: searchInfo
                });
            },
            failed: function (resp) {
                layer.close(loadDialogIndex);
                layer.msg("修改失败");
            },
            error: function (e) {
                layer.close(loadDialogIndex);
                console.log("接口异常:" + e);
            },
            forceSession: true
        };
        ReqUtil.sendPostReq(reqParam);
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });


    //新增菜单按钮弹窗事件
    $("#addMenu").click(function () {
        addMenuHtml = layer.open({
            type: 1,
            title: '新增菜单',
            content: $('#addMenuConfig').html(),
            area: '800px'
        });
        form.render();
    });
    //新增菜单保存按钮事件
    layui.form.on('submit(btnSaveMenu)', function (data) {
        console.log(data);
        console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
        console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field.toString()); //当前容器的全部表单字段，名值对形式：{name: value}
        var insertMenuReq = data.field;
        var loadDialogIndex = layer.load(2);
        console.log(insertMenuReq);
        var reqParam = {
            url: "/menu/insertMenu",
            param: insertMenuReq,
            callback: function (resp) {
                layer.close(loadDialogIndex);
                layer.closeAll();
                layer.msg("恭喜您,新增成功！");
                dataMenu.reload({
                    page: {
                        curr: 1 //重新从第一页开始
                    }
                });
            },
            failed: function (resp) {
                layer.close(loadDialogIndex);
                layer.msg(resp.returnMsg);
            },
            error: function (e) {
                layer.close(loadDialogIndex);
                console.log("接口异常:" + e);
            },
            forceSession: true
        };
        ReqUtil.sendPostReq(reqParam);
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
});